<!--回收站-->
<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="从数据库导入" :showOkBtn="true" @ok="handleSubmit" width="1200" destroyOnClose>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
    </BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup name="gen-tableListModal">
import { BasicTable, TableAction } from '/@/components/Table';
import { tableColumns, tableSearchFormSchema } from '../genData';
import { getTableList, addTables } from '../genApi';
import { useListPage } from '/@/hooks/system/useListPage';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { Modal } from 'ant-design-vue';
import { toRaw, unref, reactive } from 'vue';
const queryParam = reactive<any>({});

const { createMessage: $message } = useMessage();
const [registerModal, { setModalProps, closeModal }] = useModalInner(() => {
  //重置表格
  success();
});
// 列表页面公共参数、方法
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    rowKey: 'tableName',
    api: getTableList,
    columns: tableColumns,
    size: 'small',
    showIndexColumn: true,        //显示行号
    showActionColumn: false,      //显示操作列
    immediate: false,
    formConfig: {
      schemas: tableSearchFormSchema,
    },
    actionColumn: {
      width: 120,
    },
    ellipsis: true,
    beforeFetch: (params) => {
      return Object.assign(params, queryParam);
    },
  },
});
const emit = defineEmits(['success', 'register']);
//注册table数据
const [registerTable, { reload, updateTableDataRecord }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;

/**
 * 成功
 */
function success() {
  (selectedRowKeys.value = []) && reload();
}

//表单提交事件
async function handleSubmit(v) {
  try {
    setModalProps({ confirmLoading: true });
    //提交表单
    await addTables(selectedRowKeys.value.join(','));
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('success');
  } catch ({ errorFields }) {
    return Promise.reject(errorFields);
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>

<style lang="less" scoped>
:deep(.ant-popover-inner-content) {
  width: 185px !important;
}
</style>
